<template>
  <div class="market_cardactivity_qrcode_create Row_content">
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="130">
      <FormItem label="卡片盒数：" prop="boxCount">
        <Input v-model="formValidate.boxCount" placeholder="请输入卡片盒数" class="input-wid" :maxlength="4" @on-keyup="filterSpace" @on-blur="blur"></Input>
      </FormItem>
      <FormItem label="每盒卡片张数/盒：" prop="cardCountPerBox">
        <Input v-model="formValidate.cardCountPerBox" placeholder="自动读取全局设置" class="input-wid" disabled></Input>
      </FormItem>
      <FormItem label="二维码生成数量：" prop="qrcodeNum">
        <Input v-model="formValidate.qrcodeNum" placeholder="二维码生成数量" class="input-wid" disabled></Input>
      </FormItem>
      <FormItem label="条形码生成数量：" prop="barcodeCount">
        <Input v-model="formValidate.barcodeCount" placeholder="二维码码生成数量/每盒卡片张数" class="input-wid" disabled></Input>
      </FormItem>
      <FormItem label="卡号段：" prop="qrcodes">
        <Input v-model="formValidate.qrcodes" placeholder="自动生成本次卡号段" class="input-wid" disabled></Input>
      </FormItem>
      <FormItem class="form-btn"
              style="margin-top: 5px;">
        <Button type="primary"
                class="system-submit-btn"
                @click="handleSubmit"
                >确定</Button>
        <Button class="system-submit-btn"
                @click="handleReset"
                style="margin-left: 8px">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { routeEqual } from '@/libs/util'
import { mapState } from 'vuex'
import { saveQRcode, getQRcodeRange } from '@/api/market/cardactivity/qrcode.js'
import { getDicQuery } from '@/api/setting'
export default {
  name: 'market_cardactivity_qrcode_create',
  data () {
    return {
      formValidate: {
        boxCount: '',
        cardCountPerBox: '',
        barcodeCount: '',
        qrcodeNum: '',
        qrcodes: ''
      },
      ruleValidate: {
        boxCount: { required: true, message: '请填写卡片盒数', trigger: 'blur' },
        cardCountPerBox: { required: true, message: '自动读取全局设置' },
        barcodeCount: { required: true, message: '条形码生成数量' },
        qrcodeNum: { required: true, message: '二维码生成数量' },
        qrcodes: { required: true, message: '卡号段为必填项' }
      }
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId,
      userId: state => state.user.userId,
      userName: state => state.user.userName
    })
  },
  mounted () {
    this.getConfig()
  },
  methods: {
    getConfig () {
      const obj = Object.assign({}, {
        'merchantId': this.$store.state.user.merchantId,
        'msType': '0'
      }, { 'dictKeys': 'boxCardNum' })
      getDicQuery(obj).then(res => {
        if (res.data.status === 200) {
          res.data.data.forEach(ele => {
            if (ele.hasOwnProperty('boxCardNum')) {
              this.formValidate.cardCountPerBox = ele.boxCardNum || '100'
            }
          })
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    filterSpace () {
      this.formValidate.boxCount = this.formValidate.boxCount.replace(/[^\d]/g, '').replace(/^0{1,}/g, '')
      let value = this.formValidate.boxCount
      if (value > 5000) {
        this.formValidate.boxCount = value.substr(0, value.length - 1)
      }
    },
    blur () {
      this.filterSpace()
      this.formValidate.qrcodeNum = this.formValidate.boxCount * this.formValidate.cardCountPerBox
      if (this.formValidate.boxCount) {
        this.formValidate.barcodeCount = this.formValidate.boxCount
        getQRcodeRange({
          merchantId: this.merchantId,
          boxCount: this.formValidate.boxCount,
          cardCountPerBox: this.formValidate.cardCountPerBox
        }).then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            this.formValidate.qrcodes = result.data
          } else {
            this.$Message.error(`${result.error}`)
          }
        }).catch(err => {
          this.$Message.error(`${err}`)
        })
      } else {
        this.formValidate.barcodeCount = 0
      }
    },
    handleSubmit () {
      this.$refs.formValidate.validate(val => {
        if (val) {
          const params = {
            merchantId: this.merchantId,
            creatorName: this.userName,
            creator: this.userId,
            boxCount: this.formValidate.boxCount,
            cardCountPerBox: this.formValidate.cardCountPerBox
          }
          saveQRcode(params).then(res => {
            const result = res.data || {}
            if (result.status === 200) {
              this.$Message.success('新增成功！')
              this.handleReset()
            } else {
              this.$Message.error(`${result.error}`)
            }
          }).catch(err => {
            this.$Message.error(`${err}`)
          })
        }
      })
    },
    handleReset () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'market_cardactivity_qrcode'
        })
      })
    }
  }
}
</script>

<style lang='less'>
  .market_cardactivity_qrcode_create {
    .input-wid{
      width: 280px;
    }
  }
</style>
